<template>
  <div class="OperationOverviewRightTable">
    <div class="tableleft" style="width: 720px">
      <a-carousel arrows>

        <div>
          <div>
            <div data-v-4b5798de="" class="ant-card css-dev-only-do-not-override-1x8yaz4">
              <div class="ant-card-body tableoneslt1">
                <div class="tableones" v-for="(item, index) in realTimePowerList.slice(0, 5)">
                  <a-avatar :size="20" :style="getBackgroundStyle(index)">{{ index + 1 }}</a-avatar>
                  <div class="tableones_lf">
                    <span class="zhanname">
                      <a-tooltip>
                        <template #title>{{ item.stationName }}</template>
                        {{ item.stationName }}
                      </a-tooltip>
                    </span>
                    <span style="color: #ff9447">{{ item.power }}千瓦</span>
                    <a-divider style="background: #000; width: 1px" type="vertical" />
                    <Icon icon="fluent:vehicle-car-parking-48-filled" style="color: #00a096" />
                    <span style="margin: 0 10px">{{ item.carNum }}辆</span>
                    <span class="themecolor">充电中</span>
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
        <div v-if="realTimePowerList.length > 5">
          <div>
            <div data-v-4b5798de="" class="ant-card css-dev-only-do-not-override-1x8yaz4">
              <div class="ant-card-body tableoneslt1">
                <div class="tableones" v-for="(item, index) in realTimePowerList.slice(5)">
                  <a-avatar :size="20" :style="getBackgroundStyle(index)">{{ index + 6 }}</a-avatar>
                  <div class="tableones_lf">
                    <span class="zhanname">
                      <a-tooltip>
                        <template #title>天津市和平区华容城充电站天津市和平区华容城充电站</template>
                        天津市和平区华容城充电站天津市和平区华容城充电站
                      </a-tooltip>
                    </span>
                    <span style="color: #ff9447">135千瓦</span>
                    <a-divider style="background: #000; width: 1px" type="vertical" />
                    <Icon icon="fluent:vehicle-car-parking-48-filled" style="color: #00a096" />
                    <span style="margin: 0 10px">5辆</span>
                    <span class="themecolor">充电中</span>
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
      </a-carousel>
    </div>
    <div class="tabletight" style="width: 300px; display: none">
      <a-carousel arrows>
        <template #prevArrow>
          <div class="custom-slick-arrow" style="z-index: 1">
            <!-- <left-circle-outlined /> -->
            <Icon icon="teenyicons:left-circle-outline" style="font-size: 20px" color="#00a096" />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow">
            <!-- <right-circle-outlined /> -->
            <Icon icon="teenyicons:right-circle-outline" style="font-size: 20px" color="#00a096" />
          </div>
        </template>
        <div>
          <div>
            <div data-v-4b5798de="" class="ant-card css-dev-only-do-not-override-1x8yaz4">
              <div class="ant-card-body tableoneslt1">
                <div class="tableones" v-for="(item, index) in 5">
                  <a-avatar :size="20" :style="getBackgroundStyle(index)">{{ index + 1 }}</a-avatar>
                  <div class="tableones_lf">
                    <span class="zhanname">
                      <a-tooltip>
                        <template #title>天津市和平区华容城充电站天津市和平区华容城充电站</template>
                        天津市和平区华容城充电站天津市和平区华容城充电站
                      </a-tooltip>
                    </span>
                    <span style="color: #ff9447">135千瓦</span>
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
        <div>
          <div>
            <div data-v-4b5798de="" class="ant-card css-dev-only-do-not-override-1x8yaz4">
              <div class="ant-card-body">
                <div class="tableones" v-for="(item, index) in 5">
                  <a-avatar :size="20" :style="getBackgroundStyle(index)">{{ index + 6 }}</a-avatar>
                  <div class="tableones_lf">
                    <span class="zhanname">
                      <a-tooltip>
                        <template #title>天津市和平区华容城充电站天津市和平区华容城充电站</template>
                        天津市和平区华容城充电站天津市和平区华容城充电站
                      </a-tooltip>
                    </span>
                    <span style="color: #ff9447">135千瓦</span>
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script lang="js" name="OperationOverviewRightTable" setup>
	import {ref, reactive, computed, unref, watchEffect} from 'vue';
	import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
	const tabPosition = ref('gonglv');
	const colorlist = reactive(['#ff3217', '#ff4fa1', '#ff9447', '#ddcc0e', '#3e8ed9']);
	const props = defineProps({
		realTimePowerList: {
			type: Array,
			default: () => [],
		},
	});
	watch(
		() => props.realTimePowerList,
		(val) => {
			console.log('realTimePowerList111', val);
		},
		{
			deep: true,
		}
	);
	function getBackgroundStyle(index) {
		return {backgroundColor: colorlist[index]};
	}
	onMounted(() => {
		console.log('realTimePowerList', props.realTimePowerList);
	});
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
	width: 100%;
}
:deep(:where(.css-dev-only-do-not-override-d7e9y4).ant-carousel .slick-list .slick-slide > div > div) {
	vertical-align: top !important;
}

/* For demo */
:deep(.slick-slide) {
	text-align: center;
	height: 250px;
	line-height: 250px;
	// background: #364d79;
	overflow: hidden;
}

:deep(.slick-dots li button) {
	background: #718685 !important;
}

:deep(.slick-dots li.slick-active button) {
	background: #00a096 !important;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
	display: none;
}

:deep(.custom-slick-arrow) {
	top: auto !important;
	left: 38%;
	bottom: -16px !important;
}

.tabletight :deep(.custom-slick-arrow) {
	left: 34%;
}

:deep(.slick-next) {
	margin-left: 77px;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
	color: #00a096;
	opacity: 0.5;
}

:deep(.ant-carousel .slick-dots-bottom) {
	margin-bottom: 0px !important;
	bottom: -8px !important;
}

.themecolor {
	color: #00a096;
}

.OperationOverviewRightTable {
	width: 725px;
	display: flex;
	justify-content: space-between;

	.tableones {
		display: flex;
		align-items: center;
		height: 45px;
		line-height: 45px;

		.tableones_lf {
			margin-left: 10px;
			width: 100%;
			text-align: left;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px dashed;
			height: 45px;
			align-items: center;

			.zhanname {
				width: 180px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.tableoneslt1,
	.tabletight {
		.tableones:last-of-type {
			.tableones_lf {
				border-bottom: none;
			}
		}
	}
}
</style>
